<template>
  <div class="cities">
    <div class="now">
      <span>
        <p>当前定位城市：</p>
        <p>定位不准时，请在城市列表中选择</p>
      </span>
      <span @click="searchAction(cities)">
        <p class="city_name">{{cities.name}}</p>
        <i class="iconfont icon-fanhui1"></i>
      </span>
    </div>
    <HotCity></HotCity>
    <CityGroup></CityGroup>
  </div>
</template>

<script>
import HotCity from '@/components/HotCity.vue';
import CityGroup from '@/components/CityGroup.vue';
export default {
  name: 'City',
  components: {
    HotCity,
    CityGroup
  },
  data: function () {
    return {
      cities: [],
    }
  },
  created () {
    this.$axios.get('https://elm.cangdu.org/v1/cities', {
      params: {
        type: 'guess',
      }
    }).then(res => {
      console.log(res);
      this.cities = res.data;
    }).catch(err => console.log(err));
  },
  methods: {
    searchAction (cities) {
      this.$router.push({ name: 'SearchCity', params: { datas: cities.name, cid: cities.id } })
    }
  },

}
</script>

<style lang="less">
.cities {
  height: 100%;
  background-color: #f5f5f5;

  .now {
    background-color: white;
    padding: 15px 10px 0px;
    margin-bottom: 10px;
    span {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      p {
        font-size: 12px;
      }
      .city_name {
        font-size: 18px;
        color: #3190e8;
      }
    }
  }
}
</style>